<template>
    <div class="user">

        <!-- 条件查询 -->
        <div>
            <el-row type="flex" class="row-bg">
                <el-col :span="22">
                    <el-form :inline="true" :model="queryData" class="demo-form-inline" size="small">

                        <el-form-item label="用户姓名">
                            <el-input v-model="queryData.userName" placeholder="请输入用户姓名" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="用户账户">
                            <el-input v-model="queryData.userAccount" placeholder="请输入用户账户" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="用户类型">
                            <el-select v-model="queryData.userType" placeholder="请选择" clearable>
                                <el-option label="管理员" value="1">
                                </el-option>
                                <el-option label="用户" value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="用户状态">
                            <el-select v-model="queryData.userState" placeholder="请选择" clearable>
                                <el-option label="启用" value="1">
                                </el-option>
                                <el-option label="禁用" value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择日期" clearable>
                            <el-date-picker v-model="queryData.createdTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>

                        <!-- 查询按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="query">查询</el-button>
                        </el-form-item>

                    </el-form>
                </el-col>

            </el-row>

        </div>

        <!-- 数据表格展示 -->
        <div class="tableShow">

            <el-table :data="tableData" border style="width: 100%">

                <el-table-column prop="userName" label="用户姓名">
                </el-table-column>

                <el-table-column prop="userType" label="用户类型">
                    <template slot-scope="scope">
                        {{scope.row.userType==="1"?"管理员":"用户"}}
                    </template>
                </el-table-column>

                <el-table-column prop="userAccount" label="用户账户">
                </el-table-column>

                <el-table-column prop="userState" label="用户状态">

                    <template slot-scope="scope">
                        {{scope.row.userState==="1"?"启用":"禁用"}}
                    </template>
                </el-table-column>

                <el-table-column prop="createdTime" label="添加时间">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">

                        <el-button type="primary" size="small">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-row type="flex" class="row-bg">
                <el-col :span="6"></el-col>
                <el-col :span="6" :offset="2">
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange" :page-size='pageSize'>
                    </el-pagination>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>

        </div>
    </div>
</template>
<script>
import * as API from "../../http/api";
export default {
    name: `user`,
    data() {
        return {
            tableData: [],
            total: 0,
            pageIndex: 1,
            pageSize: 5,
            // 条件查询
            queryData: {
                userName: null,
                userType: null,
                userAccount: null,
                userState: null,
                createdTime: null
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            let that = this;
            that
                .$http({
                    method: "get",
                    url: API.queryUser,
                    params: {
                        userName: that.queryData.userName,
                        userType: that.queryData.userType,
                        userAccount: that.queryData.userAccount,
                        userState: that.queryData.userState,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    }
                })
                .then(res => {
                    console.log(res);
                    this.tableData = res.result;
                    this.total = res.length;
                });
        },
        currentChange(value) {
            console.log(`翻页了`, value);
            this.pageIndex = value;
            this.getData();
        },
        // 条件查询
        query() {
            let that = this;
            that.pageIndex = "1";
            that.getData();
        }
    }
};
</script>
<style>
</style>
